<template>
   <div>
     <van-nav-bar title="红包卡卷" left-arrow @click-left="$router.back()" />
     <van-tabs v-model="active">
       <van-tab title="可使用">
         <!-- 红包列表 -->
         <van-cell-group>
          <div class="kuang">
            <div class="red">
              <span class="qian">￥</span>
              <span class="jin">100</span>
              <div class="man">满100.00元可用</div>
            </div>
            <div class="xiaban">
              <div class="daijin">
                新用户代金券
                <div class="use">
                  可使用
                </div>
              </div>
              <div class="youxiao">
                有效期：2025-01-01至2025-12-31
              </div>
            </div>
          </div>
         </van-cell-group>
       </van-tab> 
       <van-tab title="已使用">
        <van-cell-group>
          <div class="kuang">
            <div class="red">
              <span class="qian">￥</span>
              <span class="jin">100</span>
              <div class="man">满100.00元可用</div>
            </div>
            <div class="xiaban">
              <div class="daijin">
                新用户代金券
                <div class="over">
                  已使用
                </div>
              </div>
              <div class="youxiao">
                有效期：2025-01-01至2025-12-31
              </div>
            </div>
          </div>
         </van-cell-group>
       </van-tab> 
       <van-tab title="已生效">
        <van-cell-group>
          <div class="kuang">
            <div class="red">
              <span class="qian">￥</span>
              <span class="jin">100</span>
              <div class="man">满100.00元可用</div>
            </div>
            <div class="xiaban">
              <div class="daijin">
                新用户代金券
                <div class="effect">
                已生效
                </div>
              </div>
              <div class="youxiao">
                有效期：2025-01-01至2025-12-31
              </div>
            </div>
          </div>
         </van-cell-group>
       </van-tab> 
     </van-tabs>
   </div>
</template>

<script lang="ts">
 import { ref } from 'vue';
 
 export default {
   setup() {
     const active = ref(0);
     return { active };
   }
 };
 </script>


 <style lang="less" scoped>
 *{
    margin: 0;
    padding: 0;
}

 :deep(.van-tabs__line) {
     background-color: #00A299;
 }
 .kuang{
   width: 90%;
   height: 450px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: #F5F5F5;
   padding: 10px;
   margin: 30px;
   border-radius: 20px;
 }
 .red{
   width: 90%;
   height: 200px;
   background-color: #f00b0b;
   border-radius: 10px;
  color: #F5F5F5;
  text-align: center;
  line-height:100px;
  // font-weight: bold;
  padding: 10px;

  .qian{
   font-size: 30px;
//  top:20px;
}
.jin{
   font-size: 80px;
 
}
 }
 .man{
   font-size:30px;
 
 }
 .xiaban{
  margin: 20px;
  padding: 10px;
 }
 .daijin{
   font-size: 30px;
   margin-left: 400px;
   padding: 10px;
 }
 .use{
   color: #fff;
   background-color: #00A299;
   font-size: 25px;
   border-radius: 20px;
   width: 100px;
   margin-left: 40px;
   margin-top: -50px;
   margin-bottom: 20px;
   text-align: center;
   
 }
 .youxiao{
   font-size: 25px;
   margin-top: 20px;
 color: rgb(66, 64, 64);
 margin-left: 210px;
 }

 .over{
 
   color: #fff;
   background-color: #707272;
   font-size: 25px;
   border-radius: 20px;
   width: 100px;
   margin-left: 40px;
   margin-top: -50px;
   margin-bottom: 20px;
   text-align: center;
   
 }
 .effect{
  color: #fff;
   background-color: #0645a3;
   font-size: 25px;
   border-radius: 20px;
   width: 100px;
   margin-left: 40px;
   margin-top: -50px;
   margin-bottom: 20px;
   text-align: center;
 }
 

</style>



